<template>
  <div class="reviseFigure">
    <van-nav-bar style="background-color: #DBECFE;" left-arrow :title="title" @click-left="emit('back')" />
    <van-divider hairline/>
    <div class="avatar">
      <van-image round width="80" height="80" :src="selectUrl.url"   @click = "showImage(selectUrl.url)"/>
      <div class="name"><span>{{selectUrl.name}}</span>
        <SvgIcon name="修改" size="20" @click = "openDialog"></SvgIcon>
        <van-dialog
            title="修改名字"
            v-model:show="isDialogShow"
            show-cancel-button
            @confirm="onConfirm"
        >
          <!-- 输入框 -->
          <van-field
              v-model="name"
              :value = "name"
              maxlength="10"
              bindinput="onInput"
              placeholder="请输入名字"
          />
        </van-dialog>
      </div>
<!--      <van-button v-if="props.selectUrl.attribute ===0 ||props.selectUrl.attribute ===undefined" style="width: 80px; height: 30px; font-size: 12px;margin-top: 10px;white-space: nowrap" plain type="primary"-->
<!--        round @click = "addTags">添加标签-->
<!--      </van-button>-->
      <van-button style="width: 80px; height: 30px; font-size: 12px;margin-top: 10px;white-space: nowrap" plain type="primary"
        round @click = "addTags">{{tagSingle === '' ? '添加标签' :tagSingle}}
      </van-button>
      <van-popup v-model:show="show" closeable style="height:30%;width:90%;border-radius:10px">
        <div style="margin-top: 40px;margin-left: 20px;margin-right: 20px;">
          <van-tag :plain="item.checked" v-for="(item,index) in tagList" :key="index" style="min-width: 20px; height: 30px;margin-left: 10px; font-size: 12px;border-radius: 5px" @click = "addTagsFunc(index)">
            {{item.tagName}}
          </van-tag>

        </div>
      </van-popup>
    </div>
    <div class="imgList" v-for="(item,index) in dataImg">
      <p class="imgTime">{{index}}</p>
      <div class="imgItem" v-for="ite in item">
        <van-image radius="6px" width="80" height="80" :src="getImgUrl(ite)" />
<!--        <span class="title">地点</span>-->
      </div>
    </div>
  </div>
  <van-image-preview v-model:show = "showImageFlag" :images="preImages" double-scale>
  </van-image-preview>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue';
import {computed, defineProps, onMounted, ref,watch} from "vue";
import {
  getPeopelByTimeSort,
  reNameId,
  getImgUrl,
  getAllPhotoTag,
  addIdAttribute,
  removeIdAttribute, getPeopleIdAttribute
} from "@/api/index.js";
import {showDialog, showImagePreview} from "vant";
const props =  defineProps({
  selectUrl:{
    type: Object,
    default: ''
  }
}) ;
const show = ref(false)
const showImageFlag = ref(false)
const emit = defineEmits(['back'])
const name = ref('')
const dataImg = ref({})
const tagList =ref([])
const isTag = ref(false)
const tagSingle = ref('')
const preImages = []
const attribute = ref([])

const isDialogShow = ref(false)

const addTags = ()=>{
  show.value = true
}
const showImage = (item) =>{
  showImagePreview({
    images:[item],
    closeable: true,
    showIndex: false,
  })
}

const onConfirm = () =>{
  if(name.value.length === 0 ||name.value === ''){
    showDialog({
      title: '校验失败',
      message: '输入不可为空',
    }).then(() => {
      //确认
      return
    });
  }else {
    reNameId({old_id_name: props.selectUrl.id, name: name.value})
    props.selectUrl.name = name.value
    name.value = ''
  }
}

onMounted(async ()=>{
  tagSingle.value = ''
  const responseTag = await getPeopleIdAttribute(props.selectUrl.id);
  attribute.value = responseTag.data
  if(attribute.value.length > 0){
    isTag.value = true
    attribute.value.forEach(item => {
      if(item === '我自己'||item === '好友'||item === '孩子'||item === '家人'||item === '伴侣'||item === '其他'){
        tagSingle.value = item;
        return
      }
    })
  }else{
    tagSingle.value = ''
  }
  tagList.value = [
    {tagName:'我自己',checked:true},
    {tagName:'好友',checked:true},
    {tagName:'孩子',checked:true},
    {tagName:'家人',checked:true},
    {tagName:'伴侣',checked:true},
    {tagName:'其他',checked:true}
  ]
  const {data} = await getPeopelByTimeSort(props.selectUrl.id);
  dataImg.value = data
  // const response = await getAllPhotoTag();
  // response.data.forEach(item => {
  // tagList.value.push({tagName:item,checked:true});
  // })
  console.log(props.selectUrl.attribute)
  if(props.selectUrl.attribute.length > 0) {
    tagList.value.forEach(item => {
      if (props.selectUrl.attribute.includes(item.tagName)) {
        item.checked = false
      }
    })
  }
})


watch(() => props.selectUrl,async () => {
  tagSingle.value = ''
  const responseTag = await getPeopleIdAttribute(props.selectUrl.id);
  attribute.value = responseTag.data
  if(attribute.value.length > 0){
    isTag.value = true
    attribute.value.forEach(item => {
        if(item === '我自己'||item === '好友'||item === '孩子'||item === '家人'||item === '伴侣'||item === '其他'){
          tagSingle.value = item;
          return
        }
    })
  }else{
    tagSingle.value = ''
  }
  tagList.value = [
      {tagName:'我自己',checked:true},
      {tagName:'好友',checked:true},
      {tagName:'孩子',checked:true},
      {tagName:'家人',checked:true},
      {tagName:'伴侣',checked:true},
      {tagName:'其他',checked:true}
  ]
      const {data} = await getPeopelByTimeSort(props.selectUrl.id);
      dataImg.value = data
  console.log(props.selectUrl.attribute)
  if(props.selectUrl.attribute.length > 0) {
    tagList.value.forEach(item => {
      if (props.selectUrl.attribute.includes(item.tagName)) {
        item.checked = false
      }
    })
  }
})

const addTagsFunc = (index) =>{
  //  tagList.value[index].checked = !tagList.value[index].checked
  // if(tagList.value[index].checked){
  //   removeIdAttribute({id_name:props.selectUrl.id,attribute:tagList.value[index].tagName})
  // }else{
  //   addIdAttribute({id_name:props.selectUrl.id,attribute:tagList.value[index].tagName})
  //   tagSingle.value = tagList.value[index].tagName
  // }
  tagList.value.map(item => {
    item.checked = true
    tagList.value[index].checked = false
  })
  removeIdAttribute({id_name:props.selectUrl.id,attribute:tagSingle.value})
  addIdAttribute({id_name:props.selectUrl.id,attribute:tagList.value[index].tagName})
  tagSingle.value = tagList.value[index].tagName
}
const openDialog = () => {
  isDialogShow.value = true
}

</script>

<style lang="scss" scoped>
.reviseFigure {
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #DBECFE;

  .imgList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;

    .imgTime {
      width: 100%;
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 5px;
    }

    .imgItem {
      position: relative;
      width: 25%;

      .title {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 12px
      }
    }
  }

  .avatar {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .name {
      display: flex;
      font-size: 14px;
      span{
        margin-top: 10px;
      }
    }
  }
}
</style>
